<!--
 * @Description: 日期时间组件
 * @Author: JiangMing
 * @Date: 2021-09-9 16:57:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-9 16:57:00
-->
<template>
  <uni-popup ref="popup" type="bottom" background-color="#FFF" @change="popupChange">
    <view class="popup-header">
      <text @click="close">取消</text>
      <text @click="submit">确定</text>
    </view>
    <picker-view :value="values" indicator-style="height:50px" class="picker-view" @change="change">
      <picker-view-column>
        <view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item,index) in hours" :key="index">{{item}}</view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item,index) in minutes" :key="index">{{item}}</view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item,index) in seconds" :key="index">{{item}}</view>
      </picker-view-column>
    </picker-view>
  </uni-popup>
</template>

<script>
import dayjs from 'dayjs';

export default {
  props: {
    // 日期时间
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      values: [1, 0, 0, 0, 0, 0],
      years: [],
      months: [],
      days: [],
      hours: [],
      minutes: [],
      seconds: []
    }
  },
  watch: {
    value(val) {
      this.valueInit();
    }
  },
  mounted() {
    let now = new Date(), index = 0;
    // 年
    let year = now.getFullYear();
    this.years = [`${year-1}`, `${year}`, `${year+1}`];
    // 月
    index = 0;
    while(index < 12) {
      index ++;
      this.months.push(index < 10 ? `0${index}` : index.toString());
    }
    // 日
    this.days = this.getMonthList(year, '01');
    // 时
    index = 0;
    while(index < 24) {
      this.hours.push(index < 10 ? `0${index}` : index.toString());
      index ++;
    }
    // 分
    index = 0;
    while(index < 60) {
      this.minutes.push(index < 10 ? `0${index}` : index.toString());
      index ++;
    }
    // 秒
    index = 0;
    while(index < 60) {
      this.seconds.push(index < 10 ? `0${index}` : index.toString());
      index ++;
    }
  },
  methods: {
    popupChange(e) {
      if (e.show) this.valueInit();
    },
    async valueInit() {
      let date = dayjs(this.value);
      let year = date.format('YYYY');
      let month = date.format('MM');
      let day = date.format('DD');
      let hour = date.format('HH');
      let minute = date.format('mm');
      let second = date.format('ss');
      let values = this.values;
      this.years.forEach((t,i) => {
        if (t == year) values[0] = i;
      })
      this.months.forEach((t,i) => {
        if (t == month) values[1] = i;
      })
      this.days.forEach((t,i) => {
        if (t == day) values[2] = i;
      })
      this.hours.forEach((t,i) => {
        if (t == hour) values[3] = i;
      })
      this.minutes.forEach((t,i) => {
        if (t == minute) values[4] = i;
      })
      this.seconds.forEach((t,i) => {
        if (t == second) this.$set(values, 5, i);
      })
      console.log(values)
    },
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    change({ detail }) {
      let value = detail.value;
      if (value[0] != this.values[0] || value[1] != this.values[1]) {
        this.days = this.getMonthList(this.years[value[0]], this.months[value[1]]);
      }
      this.values = value;
      console.log(value)
    },
    // 当月天数处理
    getMonthList(year, month) {
      let max = 31;
      var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
      switch (month) {
        case '01':
        case '03':
        case '05':
        case '07':
        case '08':
        case '10':
        case '12':
          max = 31;
          break;
        case '04':
        case '06':
        case '09':
        case '11':
          max = 30;
          break;
        case '02':
          max = flag ? 29 : 28;
          break;
      }
      let index = 0, days = [];
      while(index < max) {
        index ++;
        days.push(index < 10 ? `0${index}` : index.toString());
      }
      return days;
    },
    submit() {
      this.close();
      let res = [
        this.years[this.values[0]],
        this.months[this.values[1]],
        this.days[this.values[2]],
        this.hours[this.values[3]],
        this.minutes[this.values[4]],
        this.seconds[this.values[5]],
      ]
      this.$emit('submit', res)
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-header {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  color: #027AFF;
}
.picker-view {
  width: 750rpx;
  height: 600rpx;
  margin-top: 20rpx;
  .item {
    height: 50px;
    line-height: 50px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
</style>